@tailwind utilities;
@tailwind components;
@tailwind base;

:root {
	--medium-grey: #343c3d;
	--dark-grey: #1f2424;
	--font-color: white;
	--input-background-color: #505050;
	--input-border-color: #909090;
	--button-color: #375a7f;
	--button-hover-color: #436d9a;
	--dark-button-color: #282f2f;
	--link-color: #1abc9c;
}

html {
	background-color: var(--dark-grey);
	color: var(--font-color);
}

.button {
	@apply rounded px-3 py-1;
}

.button.is-primary {
	@apply text-white;
	background-color: var(--button-color);
}

.button.is-primary:hover {
	background-color: var(--button-hover-color);
}

.box {
	@apply mb-6 rounded-lg p-4;
	background-color: var(--medium-grey);
}

input[type='text'],
input[type='number'],
input[type='radio'],
input[type='file'],
select {
	@apply rounded-sm p-1.5;
	background-color: var(--input-background-color);
	border-color: var(--input-border-color);
}

.file-upload-wrapper {
	@apply flex items-center justify-center;
}

.file-upload {
	@apply cursor-pointer border px-3 py-1 text-center;
	background-color: var(--dark-button-color);
	border-color: var(--input-border-color);
}

.file-upload:hover {
	background-color: var(--dark-grey);
}

input:placeholder-shown {
	font-style: italic;
}

input::placeholder {
	color: var(--input-border-color);
	opacity: 1;
}

.field {
	@apply pt-2;
}

hr {
	background-color: var(--dark-button-color);
	border: none;
	display: block;
	height: 2px;
	margin: 1.5rem 0;
}

nav {
	background-color: var(--button-color);
}

a {
	color: var(--link-color);
}
